import { useTheme } from '../context/ThemeContext';
import { ReplyForm } from '../types/forms';

interface ReplyFormEditProps {
    reply: Partial<ReplyForm>;
    onChange: (reply: Partial<ReplyForm>) => void;
    onSubmit: () => void;
    onCancel?: () => void;
    submitLabel?: string;
}

const ReplyFormEdit: React.FC<ReplyFormEditProps> = ({
    reply,
    onChange,
    onSubmit,
    onCancel,
    submitLabel = '提交'
}) => {
    const { theme } = useTheme();

    return (
        <div style={{ marginBottom: '20px' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: '10px', marginBottom: '10px' }}>
                <label>回复人：</label>
                <input
                    type="text"
                    value={reply.responder}
                    readOnly
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd',
                        backgroundColor: theme === 'light' ? '#fff' : '#495057',
                        color: theme === 'light' ? '#000' : '#fff'
                    }}
                />
                
                <label>回复内容：</label>
                <textarea
                    value={reply.responseContent}
                    onChange={(e) => onChange({ ...reply, responseContent: e.target.value })}
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd',
                        height: '100px',
                        backgroundColor: theme === 'light' ? '#fff' : '#495057',
                        color: theme === 'light' ? '#000' : '#fff'
                    }}
                />
                
                <label>问题类别：</label>
                <input
                    type="text"
                    value={reply.questionCategory}
                    onChange={(e) => onChange({ ...reply, questionCategory: e.target.value })}
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd',
                        backgroundColor: theme === 'light' ? '#fff' : '#495057',
                        color: theme === 'light' ? '#000' : '#fff'
                    }}
                />
                
                <label>备注：</label>
                <textarea
                    value={reply.remarks}
                    onChange={(e) => onChange({ ...reply, remarks: e.target.value })}
                    style={{
                        padding: '10px',
                        borderRadius: '4px',
                        border: '1px solid #ddd',
                        height: '60px',
                        backgroundColor: theme === 'light' ? '#fff' : '#495057',
                        color: theme === 'light' ? '#000' : '#fff'
                    }}
                />
                
                <label>是否结案：</label>
                <div>
                    <input
                        type="checkbox"
                        checked={reply.isClosed}
                        onChange={(e) => onChange({ ...reply, isClosed: e.target.checked })}
                        style={{ marginRight: '8px' }}
                    />
                    <span>是</span>
                </div>

                <div style={{ gridColumn: '1 / -1', display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
                    {onCancel && (
                        <button
                            onClick={onCancel}
                            style={{
                                padding: '10px 20px',
                                backgroundColor: '#6c757d',
                                color: 'white',
                                border: 'none',
                                borderRadius: '4px',
                                cursor: 'pointer'
                            }}
                        >
                            取消
                        </button>
                    )}
                    <button
                        onClick={onSubmit}
                        style={{
                            padding: '10px 20px',
                            backgroundColor: '#007bff',
                            color: 'white',
                            border: 'none',
                            borderRadius: '4px',
                            cursor: 'pointer'
                        }}
                    >
                        {submitLabel}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default ReplyFormEdit; 